<template>
    <!-- 报错 -->
    <div class="errorContainer flexCol flexAll">
        <!-- 导航栏 -->
        <my-nav-bar></my-nav-bar>
        <img class="errorImg" src="https://img.xiaokeduo.com/xkdnewyun/systemfile/wxashop/errorPage/system_error.png" alt="">
        <!-- 提示信息 -->
        <div class="txt">{{error.errMsg}}</div>
        <!-- 返回按钮 -->
        <van-button plain type="info" @click="backPage(error.backPageName)">返回{{error.backPageName}}</van-button>
    </div>
</template>

<script>
// 引入 辅助函数
import { mapState } from 'vuex'
// 引入 公共组件
import MyNavBar from 'Components/common/MyNavBar'

export default {
    methods: {
        // 根据信息返回不同页面
        backPage(page) {
            switch (page) {
                case '首页':
                    this.$router.push({path: `/${this.common.extConfig.storeId}/pages/home/index`})
                    break;
                default:
                    break;
            }
        }
    },
    // 组件前置守卫判断跳转的由来
    beforeRouteEnter (to, from, next) {
        next(vm => {
            console.log(to)
            if (to.params.pathMatch) {
                vm.error.errMsg = "仅提供微页面预览",
                vm.error.backPageName = '首页'
            }
        })
    },
    components: {
        MyNavBar
    },
    computed: {
        ...mapState(['common', 'error'])
    }
}
</script>

<style lang="stylus">
    @import '~Css/_flex.styl'
    // 错误页
    .errorContainer
        flex 1
        // 提示信息
        .txt
            margin 0.4rem
            font-size 0.4rem
            font-size 14px
        // 报错图片
        .errorImg
            width 148px
            height 136px
</style>
